<template>
  <div class="common-layout">
    <el-container>

      <el-main>
        <router-view v-slot="{ Component, router }">
          <keep-alive>
            <transition :name="animation" mode="out-in">
              <component :is="Component" key="router.path"/>
            </transition>
          </keep-alive>
        </router-view>
      </el-main>

      
    </el-container>
  </div>
</template>

<script setup>
import {computed, ref, watch} from "vue";
import router from "@/router";
import {onBeforeRouteUpdate} from "vue-router";

// 监听路由交互
const animation = ref('slide');
computed(() =>{})
router.afterEach((to, form) => {
  if(to.meta.index > form.meta.index){
    animation.value = 'slide-left'
  }else{
    animation.value = 'slide-right'
  }
})

</script>

<style scoped>

</style>
